let form = layui.form
let layer = layui.layer
let selectId = ''
// 拿本地存储的文章列表页 获得文章数据
let articleContent = localStorage.getItem('articleContent')
$(function () {
  // 初始化文章分类下拉框
  initCates()

  // 1. 初始化图片裁剪器
  let $image = $('#image')
  // 2. 裁剪选项
  let options = {
    aspectRatio: 400 / 280,
    preview: '.img-preview'
  }
  // 3. 初始化裁剪区域
  $image.cropper(options)

  $('#selectCoverTrue').click(function () {
    $('#selectCoverVirtual').click()
  })
  $('#selectCoverVirtual').change(function () {
    // 获取到文件的列表数组
    let files = $(this)[0].files
    // 判断用户是否选择了文件
    if (files.length === 0) {
      return
    }
    // 根据文件，创建对应的 URL 地址
    var newImgURL = URL.createObjectURL(files[0])
    // 为裁剪区域重新设置图片
    $image
      .cropper('destroy') // 销毁旧的裁剪区域
      .attr('src', newImgURL) // 重新设置图片路径
      .cropper(options) // 重新初始化裁剪区域
  })

  let articleStatus = '已发布'
  $('#saveAsDraft').click(function () {
    articleStatus = '草稿'
  })

  $('#layui-form').on('submit', function (e) {
    e.preventDefault()
    let fd = new FormData($(this)[0])
    // 3. 将文章的发布状态，存到 fd 中
    fd.append('state', articleStatus)
    // 4. 将封面裁剪过后的图片，输出为一个文件对象
    $image
      .cropper('getCroppedCanvas', {
        // 创建一个 Canvas 画布
        width: 400,
        height: 280
      })
      .toBlob(function (blob) {
        fd.append('cover_img', blob)
        // 只有有本地数据才会进行文章修改操作
        if (articleContent) {
          fd.append('Id', JSON.parse(articleContent).Id)
          $.ajax({
            type: "post",
            url: "/my/article/edit",
            data: fd,
            contentType: false,
            processData: false,
            success: function (res) {
              if (res.status !== 0) {
                return layer.msg('修改文章失败！')
              }
              layer.msg('修改文章成功！')
              // 发布文章成功后，跳转到文章列表页面
              location.href = '/article/article-list.html'
              window.parent.changeLayuiThisToarticleList()
              // 修改文章成功后 清除本地的数据
              localStorage.removeItem('articleContent')
            }
          })
        } else {
          $.ajax({
            type: "post",
            url: "/my/article/add",
            data: fd,
            contentType: false,
            processData: false,
            success: function (res) {
              if (res.status !== 0) {
                return layer.msg('发布文章失败！')
              }
              layer.msg('发布文章成功！')
              location.href = '/article/article-list.html'
              window.parent.changeLayuiThisToarticleList()
            }
          })
        }
      })
  })

  if (articleContent) {
    $('#issue').html('修改')
    $('[class=layui-card-header]').html('修改文章')
    $('#saveAsDraft').hide()
    let content = JSON.parse(articleContent)
    form.val('layui-form', content)
    selectId = content.cate_id
    $image
      .cropper('destroy') // 销毁旧的裁剪区域
      .attr('src', 'http://big-event-api-t.itheima.net' + content.cover_img) // 重新设置图片路径
      .cropper(options) // 重新初始化裁剪区域
  }
})

// 初始化文章分类下拉框
function initCates() {
  $.ajax({
    type: "GET",
    url: "/my/article/cates",
    success: function (res) {
      if (res.status != 0) {
        return layer.msg(res.message || '查询失败')
      }
      let str = template('articleClassifies', res)
      $('#catesSelect').html(str)
      // 通过 layui 重新渲染表单区域的UI结构
      // 编辑文章内容
      // selectId 有值就是修改操作 才给下拉框赋值
      selectId && $('#catesSelect').val(selectId)
      form.render()
    }
  })
}

// 初始化富文本编辑器
initEditor()
